﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery's utility functions</title>
    <link rel="stylesheet" type="text/css" href="../common/qunit.css" />
    <script type="text/javascript" src="../common/jquery.js"></script>
    <script type="text/javascript" src="../common/qunit.js"></script>
    <script type="text/javascript">
        function demoTrim() {
            equal($.trim("     a b c        "), "a b c");
        }

        function demoEach() {
            // --------------- array: use this to represent the value
            var a = [1, 2, 3];
            var result = 0;
            $.each(a, function (index) {
                equal(typeof index, "number");
                result += index * this; // 'this' references the current value
            });
            equal(result, 8);

            // --------------- array: pass value explicitly to callback
            result = 0;
            $.each(a, function (index, value) {
                equal(typeof index, "number");
                result += index + value;
            });
            equal(result, 9);

            // --------------- object
            var obj = { x: 1, y: 2 };
            result = "";
            $.each(obj, function (key, value) {
                result += key + ":" + value + ";";
            });
            equal(result, "x:1;y:2;");
        }

        function demoGrep() {
            var a = [1, 2, 3, 4, 5];
            var b = $.grep(a, function (value, index) {
                return value % 2 == 0;
            });
            deepEqual(a, [1, 2, 3, 4, 5], "original array not changed");
            deepEqual(b, [2, 4]);
        }

        function demoMap() {
            // --------------- exclude null or undefined values
            var a = ["1", "cheka", "9", "6"];
            var b = $.map(a, function (value, index) {
                var parsed = parseInt(value);
                return isNaN(parsed) ? undefined : parsed;
            });
            deepEqual(b, [1, 9, 6], "exclude null or undefined");

            // --------------- flatten the returned value
            var c = ["hello wsu", "from stasi"];
            var d = $.map(c, function (value) {
                return value.split(" ");
            });
            deepEqual(d, ["hello", "wsu", "from", "stasi"], "flatten the returned array");
        }

        function demoInArray() {
            var a = [1, 2, 3];
            equal($.inArray(2, a), 1);
            equal($.inArray(-8, a), -1, "return -1 indicates not found");
        }

        function demoMerge() {
            var a1 = [1, 2, 3];
            var a2 = [2, 3, 4];

            var merged = $.merge(a1, a2);
            deepEqual(merged, [1, 2, 3, 2, 3, 4]);
            equal(merged, a1, "the first array is modifed, and returned as the result");
        }

        function demoProxy() {

            function fool(callback, value) {
                return callback(value);
            }

            var o = {
                seed: 100,
                calculate: function (number) {
                    return this.seed + number;
                }
            };

            equal(o.calculate(88), 188);
            ok(isNaN(fool(o.calculate, 6)), "return NaN because there is 'seed' property in 'this'");

            var proxy1 = $.proxy(o.calculate, o);
            equal(fool(proxy1, 6), 106);

            var proxy2 = $.proxy(o, "calculate");
            equal(fool(proxy2, 6), 106);

            var proxy3 = $.proxy(o.calculate, { seed: 3 });
            equal(fool(proxy3, 6), 9);
        }

    </script>
</head>
<body>
    <h1 id="qunit-header">
        jQuery utility functions demonstration</h1>
    <h2 id="qunit-banner">
    </h2>
    <div id="qunit-testrunner-toolbar">
    </div>
    <h2 id="qunit-userAgent">
    </h2>
    <ol id="qunit-tests">
    </ol>
    <div id="qunit-fixture">
        test markup, will be hidden</div>
    <script type="text/javascript">
        test("'trim' Remove the whitespace from the beginning and end of a string", demoTrim);
        test("'each' iterate over array or object", demoEach);
        test("grep to filter", demoGrep);
        test("map exclude when callback returns undefined or null", demoMap);
        test("inArray", demoInArray);
        test("merge", demoMerge);
        test("proxy", demoProxy);
    </script>
</body>
</html>
